<script>
import { homeData, information } from "@/http/api";
import load from "@/components/public/load.vue";
import getTimeOut from "@/components/public/getTimeOut.vue";
import { showToast, showSuccessToast, showFailToast } from "vant";

import $ from "jquery";

export default {
  components: { getTimeOut, load },
  name: "",
  data() {
    return {
      showTimeOut: false,
      showCont: false,
      birthday_dateShow: false,
      showEdit: false,
      showCar: false,
      showSendCar: false,
      showRecord: false,
      sexShow: false,
      recordArr: [],
      editInfo: {
        real_name: "",
        mobile: "",
        sex: "先生",
        birthday_date: "",
      },
      currentDate: ["2000", "01", "01"], //出生年月
      columnsType: ["year", "month", "day"], //日期格式
      minDate: new Date(1940, 0, 1),
      maxDate: new Date(),
      sexArr: [
        { name: "先生", id: 1 },
        { name: "女士", id: 2 },
      ],
      sexId: 1,
      formData: {},
      activeCarInfo: {},
    };
  },
  props: {},
  setup() {},
  methods: {
    getEndTime() {
      $.ajax({
        url: "https://gx.localbird.cn/Index/Check_project",
        data: {
          project_number: "XM95348",
        },
        type: "post",
        success: (res) => {
          console.log(res);
          if (res.data < 1) {
            alert("访问失败，请联系管理员");
          } else {
            this.getData();
          }
        },
      });
    },
    getData() {
      homeData()
        .then((res) => {
          if (res.data.code == 1) {
            this.formData = res.data.data;
          }
          this.showCont = true;
          // this.showTimeOut = true;
        })
        .catch(() => {
          this.showTimeOut = true;
          this.showCont = true;
        });
    },
    showListFn() {
      if (this.formData.hx_record.length == 0) {
        showToast("暂无核销记录");
        return false;
      }
      this.showRecord = true;
    },
    checkPhone() {
      let reg = /^1[3456789]{1}\d{9}$/;
      if (reg.test(this.editInfo.mobile)) {
        return true;
      } else {
        return false;
      }
    },
    //出生年月
    birthday_dateSureFn() {
      this.editInfo.birthday_date = this.currentDate.join("-");
      this.birthday_dateShow = false;
    },
    showCarFn(item) {
      if (!this.formData.real_name) {
        showToast("请先完善资料才能使用");
        return false;
      }
      this.activeCarInfo = item;
      this.showCar = true;
    },
    sexFn(item) {
      this.editInfo.sex = item.name;
      this.sexId = item.id;
    },
    sexSureFn() {
      let id = this.sexId - 1;
      this.editInfo.sex = this.sexArr[id].name;
      this.sexShow = false;
    },
    canUserFn() {
      let useTime = new Date(this.activeCarInfo.sx_time);
      let useNum = useTime.getTime();
      let nowTime = new Date();
      let nowNum = nowTime.getTime();
      if (useNum > nowNum) {
        return true;
      } else {
        return false;
      }
    },
    getTime(time) {
      const y = time.getFullYear();
      const m =
        time.getMonth() < 9 ? `0${time.getMonth() + 1}` : time.getMonth() + 1;
      const d = time.getDate() < 10 ? `0${time.getDate()}` : time.getDate();

      const str = `${y}-${m}-${d}`;
      return str;
    },

    isWithinLastTenDays(dateString) {
      // 将日期字符串转换为Date对象
      const targetDate = new Date(dateString);
      // 获取当前时间
      const currentDate = new Date();

      // 计算两个日期之间的毫秒数差
      const diff = targetDate.getTime() - currentDate.getTime();

      // 将毫秒差转换为天数
      const daysDiff = diff / (24 * 60 * 60 * 1000);
      console.log(daysDiff);
      // 判断是否在十天内
      return daysDiff <= 11 && daysDiff > -1;
    },
    showCoupeFn(item) {
      if (item.type == 1) {
        return true;
      } else if (item.type == 2) {
        let result = this.isWithinLastTenDays(item.sx_time);
        return result;
      }
    },
    showCannot() {
      if (this.activeCarInfo.type == 1) {
        return this.canUserFn();
      } else {
        let useTime = this.activeCarInfo.sx_time;
        let nowTime = this.getTime(new Date());
        if (useTime == nowTime) {
          return false;
        } else {
          return true;
        }
      }
    },
    saveFn() {
      if (!this.editInfo.real_name) {
        showToast("请输入您的姓名");
        return false;
      } else if (!this.checkPhone()) {
        showToast("请输入正确的手机号");
        return false;
      } else if (!this.editInfo.birthday_date) {
        showToast("请选择您的出生日期");
        return false;
      }
      let data = { ...this.editInfo };
      data.sex = this.sexId;
      information(data).then((res) => {
        if (res.data.code == 1) {
          this.showEdit = false;
          // this.showSendCar = true;
          showSuccessToast("编辑成功");
          this.getData();
        } else {
          showFailToast("编辑失败");
        }
      });
    },
  },
  mounted() {},
  created() {
    this.getEndTime();
  },
};
</script>
<template>
  <div class="container">
    <div v-if="!showTimeOut && showCont">
      <div class="bannerCont">
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item>
            <img src="/img/banner3.jpg" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/img/banner4.png" />
          </van-swipe-item>
          <van-swipe-item>
            <img src="/img/banner5.png" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <div class="tipImgCont">
        <img src="/img/tipImg.png" />
      </div>
      <div class="cardCont">
        <div class="userInfo">
          <div>
            {{ formData.nick_name }}
            <span v-if="formData.real_name">({{ formData.real_name }})</span>
          </div>
        </div>
        <div class="userUnder">
          <div class="time">入会时间：{{ formData.ws_time }}</div>
          <div class="tel" v-if="formData.real_name">{{ formData.mobile }}</div>
        </div>
        <div
          class="editBtn"
          v-if="!formData.real_name"
          @click="showEdit = true"
        >
          <div>完善资料</div>
          <div class="tag">生日礼</div>
        </div>
        <img class="logoImg" src="/img/logo.png" />
      </div>
      <div class="quanCont">
        <div class="quanHead">
          <div class="quanName">我的代金券</div>
          <div class="moreBtn" @click="showListFn">
            核销记录({{ formData.hx_record.length }})
          </div>
        </div>
        <div
          @click="showCarFn(item)"
          v-for="(item, index) in formData.coupon"
          :key="index"
        >
          <div class="quanItem" v-if="item.type == 1 && showCoupeFn(item)">
            <img src="/img/quan1.png" />
          </div>
          <div class="quanItem" v-if="item.type == 2 && showCoupeFn(item)">
            <img src="/img/quan2.png" />
          </div>
        </div>
      </div>
      <div class="underDes">
        <div>客服热线：18483613963</div>
        <div>技术支持：四川省本地鸟科技有限公司</div>
      </div>
    </div>
    <load v-if="!showCont"></load>
    <getTimeOut v-if="showTimeOut"></getTimeOut>
    <van-popup v-model:show="showEdit" position="bottom" round>
      <div class="maskCont">
        <div class="maskHead">
          完善资料送<span style="color: #ce5a34">寿星券</span>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">姓名称呼</div>
          </div>
          <input
            class="inputText"
            v-model="editInfo.real_name"
            maxlength="30"
            placeholder="请输入您的姓名"
          />
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div>您的性别</div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="sexShow = true"></div>
            <input v-model="editInfo.sex" placeholder="请选择身份" />
          </div>
          <div @click="sexShow = true" class="iconfont icon-xiala"></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="mustIcon">*</div>
            <div class="inputNameText">手机号</div>
          </div>
          <input
            class="inputText"
            type="tel"
            v-model="editInfo.mobile"
            maxlength="11"
            placeholder="请输入你的手机号"
          />
          <div
            v-if="checkPhone()"
            class="resultTag iconfont icon-gouxuan1"
          ></div>
        </div>
        <div class="formInput">
          <div class="inputName">
            <div class="inputName">
              <div class="mustIcon">*</div>
              <div class="inputNameText">出生日期</div>
            </div>
          </div>
          <div class="inputOut">
            <div class="inputMask" @click="birthday_dateShow = true"></div>
            <input
              v-model="editInfo.birthday_date"
              placeholder="选择你的出生年月日"
            />
          </div>
          <div
            @click="birthday_dateShow = true"
            class="iconfont icon-xiala"
          ></div>
        </div>
        <div class="tip" v-if="false">
          温馨提示：填写真实出生日期，可免费获赠寿星免餐券一张。
        </div>
        <div class="maskBtn" @click="saveFn">免费成为会员</div>
      </div>
    </van-popup>
    <van-popup v-model:show="birthday_dateShow" round position="bottom">
      <div class="maskCont">
        <div class="maskHead">请选择你的出生年月</div>
        <van-date-picker
          v-model="currentDate"
          title="选择年月"
          :show-toolbar="false"
          :min-date="minDate"
          :max-date="maxDate"
          :columns-type="columnsType"
        />
        <div class="maskBtn" @click="birthday_dateSureFn">确认选择</div>
      </div>
    </van-popup>
    <van-popup v-model:show="showCar" round position="bottom">
      <div class="maskCont">
        <div class="maskHead">代金券核销码</div>
        <div class="erweima">
          <img :src="activeCarInfo.qr_code" />
          <div class="cannot" v-if="showCannot()">
            <div>不可使用</div>
          </div>
        </div>
        <div class="tip">
          <div v-if="activeCarInfo.type == 1">
            温馨提示：该代金券周五、周六不可使用。
          </div>
          <div v-if="activeCarInfo.type == 1 && !canUserFn()">
            使用规则：每次每人最多可使用一张。
          </div>
          <div v-if="activeCarInfo.type == 1 && canUserFn()">
            不可使用：{{ activeCarInfo.sx_time }}后可使用此券 。
          </div>
          <div v-if="activeCarInfo.type == 2">
            使用规则：仅限寿星生日当天({{ activeCarInfo.sx_time }})使用。
          </div>
        </div>
        <div class="maskBtn" @click="showCar = false">关闭弹窗</div>
      </div>
    </van-popup>
    <van-popup v-model:show="showRecord" round position="center">
      <div class="maskCont centerWith" style="width: 320px">
        <div class="maskHead">核销记录</div>
        <div class="recordCont">
          <div
            class="recordItem"
            :key="index"
            v-for="(item, index) in formData.hx_record"
          >
            <div class="money">
              {{ item.type == 1 ? "10元代金券" : "寿星免单券" }}
            </div>
            <div class="time">{{ item.use_time }}</div>
          </div>
          <div class="maskBtn" @click="showRecord = false">关闭弹窗</div>
        </div>
      </div>
    </van-popup>
    <van-popup
      v-model:show="showSendCar"
      :close-on-click-overlay="false"
      round
      position="center"
    >
      <div class="maskCont centerWith" style="width: 320px">
        <div class="maskHead">开心季送您一张寿星券</div>
        <img class="coupeImg" src="/img/quan2.png" />
        <div class="maskBtn" @click="showSendCar = false">开心收下</div>
      </div>
    </van-popup>
    <van-popup
      :close-on-click-overlay="false"
      v-model:show="sexShow"
      round
      position="bottom"
    >
      <div class="maskCont">
        <div class="maskHead">请选择您的性别？</div>
        <div class="maskCheck">
          <div
            @click="sexFn(item)"
            :class="
              item.id == sexId
                ? 'maskCheckItemActive maskCheckItem'
                : 'maskCheckItem'
            "
            :key="index"
            v-for="(item, index) in sexArr"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="maskBtn" @click="sexSureFn">确认选择</div>
      </div>
    </van-popup>
  </div>
</template>
<style scoped lang="less">
.container {
  background-color: #f8f8f8;
  min-height: 100vh;
}
.bannerCont {
  width: 100%;
  img {
    width: 100%;
  }
}
.quanCont {
  width: 92%;
  margin: 0.75rem auto;
  background-color: #fff;
  padding: 0.75rem;
  box-sizing: border-box;
  border-radius: 0.25rem;
  .quanHead {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .quanName {
      font-size: 0.7rem;
      font-weight: bold;
    }
    .moreBtn {
      color: #ce5a34;
      font-size: 0.6rem;
    }
  }
  .quanItem {
    width: 100%;
    margin-top: 0.5rem;
    img {
      width: 100%;
      border-radius: 0.25rem;
    }
  }
}
.underDes {
  width: 100%;
  text-align: center;
  font-size: 0.6rem;
  color: #666;
  margin-top: 1.75rem;
  div {
    margin-top: 0.25rem;
  }
}
.tipImgCont {
  width: 100%;
  margin-top: 0.75rem;
  text-align: center;
  img {
    width: 92%;
  }
}
.cardCont {
  width: 92%;
  margin: 0 auto;
  background-image: linear-gradient(
    to right bottom,
    #ce5a34,
    rgb(245, 177, 154)
  );
  margin-top: 0.75rem;
  padding: 0.75rem;
  box-sizing: border-box;
  border-radius: 0.25rem;
  font-size: 0.75rem;
  position: relative;

  .logoImg {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 6.5rem;
    transform: rotateY(180deg);
  }
  .userInfo {
    font-size: 0.8rem;
    font-weight: bold;
    color: #fff;
  }
  .userUnder {
    margin-top: 0.25rem;
    .time {
      color: #fff;
      font-size: 0.6rem;
    }
    .tel {
      color: #fff;
      margin-top: 0.75rem;
    }
  }
  .editBtn {
    width: 8rem;
    line-height: 1.6rem;
    margin-top: 0.75rem;
    border-radius: 1rem;
    font-size: 0.6rem;
    background-image: linear-gradient(
      to right bottom,
      #fff,
      rgb(245, 194, 177)
    );
    color: #ce5a34;
    text-align: center;
    position: relative;
    .tag {
      background-color: red;
      color: #fff;
      position: absolute;
      padding: 0.1rem 0.75rem;
      font-size: 0.6rem;
      transform: scale(0.6);
      top: -1rem;
      right: -1rem;
      border-radius: 1rem 0 1rem 0;
    }
  }
}
.maskCont {
  padding: 0.75rem;
  box-sizing: border-box;
  .maskHead {
    text-align: center;
    font-size: 0.8rem;
    font-weight: bold;
    margin-bottom: 0.75rem;
  }
  .coupeImg {
    width: 100%;
  }
  .maskCheck {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .maskCheckItem {
      width: 46%;
      text-align: center;
      background-color: #f6f7f9;
      padding: 0.75rem 0;
      border-radius: 0.25rem;
    }
    .maskCheckItemActive {
      background-color: #ce5a34;
      color: #fff;
    }
  }
  .recordCont {
    width: 100%;
    padding-bottom: 0.25rem;
    .recordItem {
      padding: 0.75rem 0;
      box-sizing: border-box;
      border-bottom: 1px dashed #ddd;
      justify-content: space-between;
      display: flex;
      align-items: center;
      .money {
        color: #ce5a34;
      }
      .time {
        color: #333;
        font-size: 0.6rem;
      }
    }
  }
  .erweima {
    width: 50%;
    margin: 0.75rem auto;
    position: relative;
    font-size: 0;
    img {
      width: 100%;
    }
    .cannot {
      font-size: 0.8rem;
      font-weight: bold;
      background-color: rgba(255, 255, 255, 0.8);
      left: 0;
      top: 0;
      width: 100%;
      position: absolute;
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
    }
  }
  .tip {
    text-align: center;
    font-size: 0.6rem;
  }
  .formInput {
    display: flex;
    padding: 0.75rem 1rem;
    box-sizing: border-box;
    align-items: center;
    width: 100%;
    background-color: #f8f8f8;
    margin-bottom: 1rem;
    border-radius: 1.5rem;
    .inputName {
      width: 4rem;
      position: relative;
      .mustIcon {
        font-size: 0.7rem;
        top: 0rem;
        left: -0.4rem;
        position: absolute;
        color: #ff5757;
      }
    }
    .resultTag {
      color: #5cc78e;
      font-size: 0.8rem;
    }
    .icon-xiala {
      width: 1.5rem;
      font-size: 0.8rem;
      color: #ccc;
      text-align: center;
    }
    .inputOut {
      flex: 1;
      width: 3rem;
      position: relative;
      .inputMask {
        width: 100%;
        height: 100%;
        position: absolute;
        left: 0;
        top: 0;
      }
      input {
        width: 90%;
        border: none;
        background: none;
        outline: none;
      }
    }
    .inputText {
      flex: 1;
      width: 3rem;
      border: none;
      background: none;
      outline: none;
    }
  }
  .tip {
    color: #333;
  }
  .maskBtn {
    width: 100%;
    text-align: center;
    padding: 0.6rem 0;
    background-image: linear-gradient(
      to right bottom,
      #ce5a34,
      rgb(254, 210, 196)
    );
    color: #fff;
    border-radius: 2rem;
    margin-top: 1.5rem;
  }
}
.centerWith {
  padding: 0.75rem;
  box-sizing: border-box;
  max-height: 25rem;
  .maskBtn {
    margin-bottom: 0.75rem;
  }
}
</style>
